<template>
  <div class="tab-title-page withdrawal">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" style="width:220px" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="下单姓名">
          <el-input v-model="searchForm.receivingName" placeholder="请输入下单姓名" clearable />
        </el-form-item>
        <el-form-item label="下单电话">
          <el-input v-model="searchForm.receivingMobile" placeholder="请输入下单电话" clearable />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.orderStatus" placeholder="全部" clearable>
            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="第几期">
          <el-select v-model="searchForm.leaseTerm" placeholder="全部" clearable>
            <el-option v-for="item in 12" :key="item" :label="`第${item}期`" :value="item + ''" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单日">
          <my-date-picker ref="makeOrderPicker" />
        </el-form-item>
        <el-form-item label="预计扣款日">
          <my-date-picker ref="withholdPicker" />
        </el-form-item>
        <el-form-item label="实际支付日">
          <my-date-picker ref="payPicker" />
        </el-form-item>
        <el-form-item label="退款时间">
          <my-date-picker ref="refundPicker" />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="searchForm.shopName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
        </h5>
        <el-button v-if="$hasMethod('#export')" size="small" icon="el-icon-upload2" class="export-btn" @click="exportFile">导出</el-button>
      </div>
      <el-table border :data="tableData">
        <el-table-column fixed width="60" align="center" prop="lease_id" label="编号" />
        <el-table-column fixed align="center" label="订单号">
          <template slot-scope="scope">
            <span class="blue-font pointer" @click="goToOrder(scope.row.trade_no)">{{ scope.row.trade_no }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="goods_title" label="商品名称" />
        <el-table-column align="center" prop="source" label="订单来源" />
        <el-table-column align="center" label="第几期">
          <template slot-scope="scope">
            <span>{{ scope.row.which_period }}/{{ scope.row.month_total }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="租期" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.begin_time }}至{{ scope.row.end_time }}（共{{ scope.row.month_total }}期）</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付方式">
          <template slot-scope="scope">
            <span>{{ scope.row.pay_type == 1 ? '智能合同代扣' : scope.row.pay_type == 2 ? '预授权代扣' : scope.row.pay_type == 3 ? '花呗分期' : '主动支付' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="下单日" width="100" />
        <el-table-column align="center" prop="begin_time" label="预计扣款日" width="100" />
        <el-table-column align="center" prop="pay_time" label="实际支付日" width="100" />
        <el-table-column align="center" prop="rent" label="账单金额" />
        <el-table-column align="center" prop="paid_rent" label="实付金额" />
        <el-table-column align="center" prop="trans_amount" label="退款金额" />
        <el-table-column align="center" prop="settle_amount" label="结算租金" />
        <el-table-column align="center" prop="settle_time" label="结算时间" />
        <el-table-column align="center" prop="withhold_num" label="扣款次数" />
        <el-table-column align="center" label="支付状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.lease_status == 0 || scope.row.lease_status == 4 ? 'warning' : 'success'">
              {{ scope.row.lease_status == 1 ? '已支付' : scope.row.lease_status == 2 ? '已退款' : scope.row.lease_status == 3 ? '已买断' : scope.row.lease_status == 4 ? '已逾期' : '未支付' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="statusName" label="订单状态" />
        <el-table-column align="center" prop="trans_create_time" label="退款时间" />
        <el-table-column align="center" prop="realname" label="下单姓名" />
        <el-table-column align="center" prop="mobile" label="下单电话" />
        <el-table-column align="center" prop="prov" label="省" />
        <el-table-column align="center" prop="city" label="市" />
        <el-table-column align="center" prop="area" label="区/县" />
        <el-table-column width="140" align="center" label="下单地址">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.address.length > 30" placement="top-start" width="200" trigger="hover">
              <p>{{ scope.row.address }}</p>
              <p slot="reference" class="over_address">{{ scope.row.address }}</p>
            </el-popover>
            <p v-else class="over_address">{{ scope.row.address }}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderRemark" label="备注" />
        <el-table-column fixed="right" align="center" prop="shopname" label="供应商名称" />
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import { getOrderStatus, financeLeaseList, leaseListExport } from '@/api/finance'
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      searchForm: {
        orderNo: '',
        goodsName: '',
        receivingName: '',
        receivingMobile: '',
        orderStatus: '',
        leaseTerm: '',
        orderCreateTime: '',
        leaseTime: '',
        orderPayTime: '',
        refundTime: '',
        shopName: ''
      },
      tableData: [],
      total: 0,
      selectList: []
    }
  },
  mounted() {
    this.getSelect()
    this.getList()
  },
  methods: {
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    // 获取数据
    getList() {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      financeLeaseList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total || 0
      })
    },
    // 查询
    search() {
      const pickerVal1 = this.$refs.makeOrderPicker.getVal()
      const pickerVal2 = this.$refs.withholdPicker.getVal()
      const pickerVal3 = this.$refs.payPicker.getVal()
      const pickerVal4 = this.$refs.refundPicker.getVal()
      if (pickerVal1 === 'error' || pickerVal2 === 'error' || pickerVal3 === 'error' || pickerVal4 === 'error') {
        return
      }
      this.searchForm.orderCreateTime = pickerVal1
      this.searchForm.leaseTime = pickerVal2
      this.searchForm.orderPayTime = pickerVal3
      this.searchForm.refundTime = pickerVal4
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      if (this.$refs.makeOrderPicker) {
        this.$refs.makeOrderPicker.reset()
      }
      if (this.$refs.withholdPicker) {
        this.$refs.withholdPicker.reset()
      }
      if (this.$refs.payPicker) {
        this.$refs.payPicker.reset()
      }
      if (this.$refs.refundPicker) {
        this.$refs.refundPicker.reset()
      }
      this.searchForm = {
        orderNo: '',
        goodsName: '',
        receivingName: '',
        receivingMobile: '',
        orderStatus: '',
        leaseTerm: '',
        orderCreateTime: '',
        leaseTime: '',
        orderPayTime: '',
        refundTime: '',
        shopName: ''
      }
      this.getList()
    },
    // 导出
    exportFile() {
      leaseListExport(this.searchForm)
    },
    getSelect() {
      getOrderStatus().then(res => {
        const list = []
        for (const key in res) {
          list.push({
            id: key,
            name: res[key]
          })
        }
        this.selectList = list || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 15px 0 15px;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
}

.child_page {
  padding: 15px;
}

.over_address {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
</style>
